<template>
  <div class="dashboard-container">
    <!-- 顶部统计卡片 -->
    <div class="stats-cards">
      <ACard class="stat-card" :bordered="false">
        <div class="stat-content">
          <div class="stat-icon user-icon">
            <UserOutlined />
          </div>
          <div class="stat-info">
            <div ref="userCountRef" class="stat-number">
              0
            </div>
            <div class="stat-label">
              总用户数
            </div>
            <div class="stat-trend positive">
              <ArrowUpOutlined /> +12.5%
            </div>
          </div>
        </div>
      </ACard>

      <ACard class="stat-card" :bordered="false">
        <div class="stat-content">
          <div class="stat-icon order-icon">
            <ShoppingCartOutlined />
          </div>
          <div class="stat-info">
            <div ref="orderCountRef" class="stat-number">
              0
            </div>
            <div class="stat-label">
              今日订单
            </div>
            <div class="stat-trend positive">
              <ArrowUpOutlined /> +8.2%
            </div>
          </div>
        </div>
      </ACard>

      <ACard class="stat-card" :bordered="false">
        <div class="stat-content">
          <div class="stat-icon revenue-icon">
            <DollarOutlined />
          </div>
          <div class="stat-info">
            <div ref="revenueCountRef" class="stat-number">
              ¥0
            </div>
            <div class="stat-label">
              今日收入
            </div>
            <div class="stat-trend negative">
              <ArrowDownOutlined /> -2.1%
            </div>
          </div>
        </div>
      </ACard>

      <ACard class="stat-card" :bordered="false">
        <div class="stat-content">
          <div class="stat-icon visit-icon">
            <EyeOutlined />
          </div>
          <div class="stat-info">
            <div ref="visitCountRef" class="stat-number">
              0
            </div>
            <div class="stat-label">
              页面访问
            </div>
            <div class="stat-trend positive">
              <ArrowUpOutlined /> +15.3%
            </div>
          </div>
        </div>
      </ACard>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <div class="chart-row">
        <!-- 销售趋势图 -->
        <ACard title="销售趋势" class="chart-card" :bordered="false">
          <template #extra>
            <RadioGroup v-model:value="salesPeriod" size="small" @change="updateSalesData">
              <RadioButton value="7d">
                7天
              </RadioButton>
              <RadioButton value="30d">
                30天
              </RadioButton>
              <RadioButton value="90d">
                90天
              </RadioButton>
            </RadioGroup>
          </template>
          <div class="chart-container">
            <VChart
              class="chart"
              :option="salesChartOption"
              :autoresize="true"
              @click="onSalesChartClick"
            />
          </div>
        </ACard>

        <!-- 用户分布饼图 -->
        <ACard title="用户分布" class="chart-card" :bordered="false">
          <div class="chart-container">
            <VChart
              class="chart"
              :option="userDistributionOption"
              :autoresize="true"
            />
          </div>
        </ACard>
      </div>

      <div class="chart-row">
        <!-- 实时数据监控 -->
        <ACard title="实时数据监控" class="chart-card" :bordered="false">
          <template #extra>
            <ASwitch
              v-model:checked="realTimeEnabled"
              checked-children="开启"
              un-checked-children="关闭"
              @change="toggleRealTime"
            />
          </template>
          <div class="chart-container">
            <VChart
              class="chart"
              :option="realTimeChartOption"
              :autoresize="true"
            />
          </div>
        </ACard>

        <!-- 地区销售分布 -->
        <ACard title="地区销售分布" class="chart-card" :bordered="false">
          <div class="chart-container">
            <VChart
              class="chart"
              :option="regionChartOption"
              :autoresize="true"
            />
          </div>
        </ACard>
      </div>

      <div class="chart-row">
        <!-- 最近活动 -->
        <ACard title="最近活动" class="activity-card" :bordered="false">
          <div class="activity-list">
            <TransitionGroup name="list" tag="div">
              <div v-for="activity in recentActivities" :key="activity.id" class="activity-item" :class="{ dragging: draggingItem === activity.id }" draggable="true" @dragstart="onDragStart($event, activity)" @dragend="onDragEnd" @dragover.prevent @dragenter.prevent @drop="onDrop($event, activity)">
                <div class="activity-avatar">
                  <AAvatar :src="activity.avatar" :style="{ backgroundColor: activity.color }">
                    {{ activity.name.charAt(0) }}
                  </AAvatar>
                </div>
                <div class="activity-content">
                  <div class="activity-title">
                    {{ activity.title }}
                  </div>
                  <div class="activity-desc">
                    {{ activity.description }}
                  </div>
                  <div class="activity-time">
                    {{ activity.time }}
                  </div>
                </div>
                <div class="activity-status">
                  <ATag :color="activity.status === 'success' ? 'green' : activity.status === 'warning' ? 'orange' : 'blue'" @click="toggleActivityStatus(activity)">
                    {{ activity.statusText }}
                  </ATag>
                </div>
              </div>
            </TransitionGroup>
          </div>
        </ACard>

        <!-- 项目概览 -->
        <ACard title="项目概览" class="project-overview-card" :bordered="false">
          <div class="project-list">
            <div v-for="project in projects" :key="project.id" class="project-item">
              <div class="project-info">
                <div class="project-name">
                  {{ project.name }}
                </div>
                <div class="project-desc">
                  {{ project.description }}
                </div>
              </div>
              <div class="project-progress">
                <div class="progress-text">
                  {{ project.progress }}%
                </div>
                <AProgress :percent="project.progress" :stroke-color="project.color" size="small" />
              </div>
            </div>
          </div>
        </ACard>
      </div>
    </div>

    <!-- 任务进度追踪 -->
    <div class="task-section">
      <ACard title="任务进度追踪" :bordered="false">
        <div class="task-list">
          <div v-for="task in tasks" :key="task.id" class="task-item" :class="{ dragging: draggingTask === task.id }" draggable="true" @dragstart="onTaskDragStart($event, task)" @dragend="onTaskDragEnd" @dragover.prevent @dragenter.prevent @drop="onTaskDrop($event, task)">
            <div class="task-header">
              <div class="task-title">
                {{ task.title }}
              </div>
              <ATag :color="getTaskStatusColor(task.status)">
                {{ task.statusText }}
              </ATag>
            </div>
            <div class="task-content">
              <div class="task-desc">
                {{ task.description }}
              </div>
              <div class="task-meta">
                <div class="task-assignee">
                  <AAvatar :style="{ backgroundColor: task.assigneeColor, marginRight: '5px' }" size="small">
                    {{ task.assignee.charAt(0) }}
                  </AAvatar>
                  {{ task.assignee }}
                </div>
                <div class="task-due">
                  截止: {{ task.dueDate }}
                </div>
              </div>
              <div class="task-progress">
                <AProgress :percent="task.progress" :stroke-color="task.progressColor" size="small" />
              </div>
            </div>
          </div>
        </div>
      </ACard>
    </div>
  </div>
</template>

<script setup>
import { ArrowDownOutlined, ArrowUpOutlined, DollarOutlined, EyeOutlined, ShoppingCartOutlined, UserOutlined } from '@ant-design/icons-vue'

import { Avatar as AAvatar, Progress as AProgress, Switch as ASwitch, Tag as ATag, RadioButton, RadioGroup } from 'ant-design-vue'
import { BarChart, GaugeChart, LineChart, PieChart } from 'echarts/charts'
import { DataZoomComponent, GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import gsap from 'gsap'
import VChart from 'vue-echarts'

// 注册ECharts组件
use([
  CanvasRenderer,
  LineChart,
  PieChart,
  BarChart,
  GaugeChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  ToolboxComponent,
])

// 统计数据
const userStats = reactive({
  total: 12580,
})

const orderStats = reactive({
  total: 1234,
})

const revenueStats = reactive({
  total: 98765,
})

const visitStats = reactive({
  total: 45678,
})

// 引用DOM元素以实现数字动画
const userCountRef = ref(null)
const orderCountRef = ref(null)
const revenueCountRef = ref(null)
const visitCountRef = ref(null)

// 销售数据周期
const salesPeriod = ref('7d')

// 实时监控开关
const realTimeEnabled = ref(true)
let realTimeTimer = null
const realTimeData = ref([])
const realTimeLabels = ref([])

// 拖拽状态
const draggingItem = ref(null)
const draggingTask = ref(null)

// 销售趋势图配置
const salesChartOption = computed(() => {
  const data7d = [
    { date: '01-15', value: 12000 },
    { date: '01-16', value: 15000 },
    { date: '01-17', value: 18000 },
    { date: '01-18', value: 16000 },
    { date: '01-19', value: 22000 },
    { date: '01-20', value: 25000 },
    { date: '01-21', value: 28000 },
  ]

  const data30d = Array.from({ length: 30 }, (_, i) => ({
    date: `${String(i + 1).padStart(2, '0')}`,
    value: Math.floor(Math.random() * 20000) + 10000,
  }))

  const data90d = Array.from({ length: 90 }, (_, i) => ({
    date: `${String(i + 1).padStart(2, '0')}`,
    value: Math.floor(Math.random() * 30000) + 15000,
  }))

  const dataMap = {
    '7d': data7d,
    '30d': data30d,
    '90d': data90d,
  }

  const currentData = dataMap[salesPeriod.value]

  return {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#333',
      textStyle: {
        color: '#fff',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: currentData.map(item => item.date),
      axisLine: {
        lineStyle: {
          color: '#e8e8e8',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#e8e8e8',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0',
        },
      },
    },
    series: [
      {
        name: '销售额',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          width: 3,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#1e3a8a' },
              { offset: 1, color: '#3b82f6' },
            ],
          },
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
              { offset: 1, color: 'rgba(59, 130, 246, 0.05)' },
            ],
          },
        },
        data: currentData.map(item => item.value),
        animationDuration: 2000,
        animationEasing: 'cubicOut',
      },
    ],
  }
})

// 用户分布饼图配置
const userDistributionOption = ref({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    top: 'center',
  },
  series: [
    {
      name: '用户分布',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['60%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2,
      },
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold',
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 4500, name: '新用户', itemStyle: { color: '#3b82f6' } },
        { value: 3500, name: '活跃用户', itemStyle: { color: '#10b981' } },
        { value: 2000, name: '沉睡用户', itemStyle: { color: '#f59e0b' } },
      ],
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay(idx) {
        return Math.random() * 200
      },
    },
  ],
})

// 实时数据图表配置
const realTimeChartOption = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: realTimeLabels.value,
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
    },
    series: [
      {
        name: 'CPU使用率',
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: '#1e3a8a',
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(30, 58, 138, 0.3)' },
              { offset: 1, color: 'rgba(30, 58, 138, 0.05)' },
            ],
          },
        },
        data: realTimeData.value,
        animationDuration: 0,
      },
    ],
  }
})

// 地区销售分布图表配置
const regionChartOption = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
  },
  yAxis: {
    type: 'category',
    data: ['北京', '上海', '广州', '深圳', '杭州', '成都'],
  },
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230],
      itemStyle: {
        color(params) {
          const colors = ['#1e3a8a', '#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe']
          return colors[params.dataIndex % colors.length]
        },
        borderRadius: [0, 4, 4, 0],
      },
      animationDelay(idx) {
        return idx * 100
      },
    },
  ],
  animationEasing: 'elasticOut',
  animationDelayUpdate(idx) {
    return idx * 5
  },
})

// 最近活动数据
const recentActivities = ref([
  {
    id: 1,
    name: '张三',
    avatar: '',
    color: '#1e3a8a',
    title: '新用户注册',
    description: '用户张三完成了账户注册',
    time: '2分钟前',
    status: 'success',
    statusText: '成功',
  },
  {
    id: 2,
    name: '李四',
    avatar: '',
    color: '#10b981',
    title: '订单支付',
    description: '订单 #12345 支付成功',
    time: '5分钟前',
    status: 'success',
    statusText: '已完成',
  },
  {
    id: 3,
    name: '王五',
    avatar: '',
    color: '#f59e0b',
    title: '退款申请',
    description: '订单 #12346 申请退款',
    time: '10分钟前',
    status: 'warning',
    statusText: '处理中',
  },
  {
    id: 4,
    name: '赵六',
    avatar: '',
    color: '#ef4444',
    title: '系统登录',
    description: '管理员赵六登录系统',
    time: '15分钟前',
    status: 'info',
    statusText: '正常',
  },
])

// 项目概览数据
const projects = ref([
  {
    id: 1,
    name: '电商平台升级',
    description: '优化用户体验和支付流程',
    progress: 75,
    color: '#1e3a8a',
  },
  {
    id: 2,
    name: '移动应用开发',
    description: '开发iOS和Android客户端',
    progress: 45,
    color: '#3b82f6',
  },
  {
    id: 3,
    name: '数据分析系统',
    description: '构建实时数据分析平台',
    progress: 90,
    color: '#10b981',
  },
  {
    id: 4,
    name: '安全审计',
    description: '系统安全性评估和优化',
    progress: 30,
    color: '#f59e0b',
  },
])

// 任务数据
const tasks = ref([
  {
    id: 1,
    title: '用户界面设计',
    description: '设计新版本的用户界面和交互流程',
    assignee: '张设计',
    assigneeColor: '#1e3a8a',
    dueDate: '2024-06-30',
    status: 'progress',
    statusText: '进行中',
    progress: 60,
    progressColor: '#3b82f6',
  },
  {
    id: 2,
    title: '后端API开发',
    description: '实现新功能的后端API接口',
    assignee: '李开发',
    assigneeColor: '#10b981',
    dueDate: '2024-06-25',
    status: 'review',
    statusText: '审核中',
    progress: 85,
    progressColor: '#8b5cf6',
  },
  {
    id: 3,
    title: '数据库优化',
    description: '优化数据库查询性能',
    assignee: '王数据',
    assigneeColor: '#f59e0b',
    dueDate: '2024-06-20',
    status: 'completed',
    statusText: '已完成',
    progress: 100,
    progressColor: '#10b981',
  },
  {
    id: 4,
    title: '自动化测试',
    description: '编写自动化测试用例',
    assignee: '赵测试',
    assigneeColor: '#ef4444',
    dueDate: '2024-06-28',
    status: 'pending',
    statusText: '待处理',
    progress: 20,
    progressColor: '#9ca3af',
  },
])

// 初始化实时数据
function initRealTimeData() {
  const now = new Date()
  for (let i = 19; i >= 0; i--) {
    const time = new Date(now.getTime() - i * 1000)
    realTimeLabels.value.push(time.toLocaleTimeString())
    realTimeData.value.push(Math.floor(Math.random() * 100))
  }
}

// 更新实时数据
function updateRealTimeData() {
  if (!realTimeEnabled.value)
    return

  const now = new Date()
  realTimeLabels.value.shift()
  realTimeLabels.value.push(now.toLocaleTimeString())

  realTimeData.value.shift()
  realTimeData.value.push(Math.floor(Math.random() * 100))
}

// 开启/关闭实时监控
function toggleRealTime(enabled) {
  if (enabled) {
    realTimeTimer = setInterval(updateRealTimeData, 1000)
  }
  else {
    if (realTimeTimer) {
      clearInterval(realTimeTimer)
      realTimeTimer = null
    }
  }
}

// 更新销售数据
function updateSalesData() {
  // 数据会通过computed自动更新
}

// 销售图表点击事件
function onSalesChartClick(params) {
}

// 获取状态颜色
function getTaskStatusColor(status) {
  const colorMap = {
    completed: 'green',
    progress: 'blue',
    review: 'purple',
    pending: 'gray',
  }
  return colorMap[status] || 'default'
}

// 活动拖拽事件处理
function onDragStart(event, activity) {
  draggingItem.value = activity.id
  event.dataTransfer.effectAllowed = 'move'
  event.dataTransfer.setData('text/plain', activity.id)
}

function onDragEnd() {
  draggingItem.value = null
}

function onDrop(event, targetActivity) {
  event.preventDefault()
  const sourceId = Number.parseInt(event.dataTransfer.getData('text/plain'))
  const targetId = targetActivity.id

  if (sourceId !== targetId) {
    const activities = [...recentActivities.value]
    const sourceIndex = activities.findIndex(item => item.id === sourceId)
    const targetIndex = activities.findIndex(item => item.id === targetId)

    const [movedItem] = activities.splice(sourceIndex, 1)
    activities.splice(targetIndex, 0, movedItem)

    recentActivities.value = activities
  }
}

// 任务拖拽事件处理
function onTaskDragStart(event, task) {
  draggingTask.value = task.id
  event.dataTransfer.effectAllowed = 'move'
  event.dataTransfer.setData('text/plain', task.id)
}

function onTaskDragEnd() {
  draggingTask.value = null
}

function onTaskDrop(event, targetTask) {
  event.preventDefault()
  const sourceId = Number.parseInt(event.dataTransfer.getData('text/plain'))
  const targetId = targetTask.id

  if (sourceId !== targetId) {
    const taskList = [...tasks.value]
    const sourceIndex = taskList.findIndex(item => item.id === sourceId)
    const targetIndex = taskList.findIndex(item => item.id === targetId)

    const [movedItem] = taskList.splice(sourceIndex, 1)
    taskList.splice(targetIndex, 0, movedItem)

    tasks.value = taskList
  }
}

// 切换活动状态
function toggleActivityStatus(activity) {
  const statusMap = {
    success: { status: 'warning', statusText: '处理中' },
    warning: { status: 'info', statusText: '正常' },
    info: { status: 'success', statusText: '成功' },
  }

  const newStatus = statusMap[activity.status] || { status: 'success', statusText: '成功' }
  activity.status = newStatus.status
  activity.statusText = newStatus.statusText
}

// 数字动画效果
function animateNumbers() {
  if (userCountRef.value) {
    gsap.to(userCountRef.value, {
      innerHTML: userStats.total,
      duration: 2,
      ease: 'power1.out',
      snap: { innerHTML: 1 },
    })
  }

  if (orderCountRef.value) {
    gsap.to(orderCountRef.value, {
      innerHTML: orderStats.total,
      duration: 2,
      ease: 'power1.out',
      snap: { innerHTML: 1 },
    })
  }

  if (revenueCountRef.value) {
    gsap.to(revenueCountRef.value, {
      innerHTML: `¥${revenueStats.total.toLocaleString()}`,
      duration: 2,
      ease: 'power1.out',
    })
  }

  if (visitCountRef.value) {
    gsap.to(visitCountRef.value, {
      innerHTML: visitStats.total,
      duration: 2,
      ease: 'power1.out',
      snap: { innerHTML: 1 },
    })
  }
}

// 生命周期
onMounted(() => {
  initRealTimeData()
  toggleRealTime(realTimeEnabled.value)
  animateNumbers()
})

onUnmounted(() => {
  if (realTimeTimer) {
    clearInterval(realTimeTimer)
  }
})
</script>

<style lang="less" scoped>
.dashboard-container {
  min-height: 100vh;
  padding: 24px;
  background-color: #f0f2f5;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.stat-card {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 5%);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
    transform: translateY(-5px);
  }

  .stat-content {
    display: flex;
    align-items: center;

    .stat-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      margin-right: 16px;
      font-size: 24px;
      color: white;
      border-radius: 12px;
      transition: all 0.3s ease;

      &.user-icon {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      &.order-icon {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      &.revenue-icon {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      &.visit-icon {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }
    }

    .stat-info {
      flex: 1;

      .stat-number {
        margin-bottom: 4px;
        font-size: 28px;
        font-weight: bold;
        line-height: 1;
        color: #262626;
      }

      .stat-label {
        margin-bottom: 8px;
        font-size: 14px;
        color: #8c8c8c;
      }

      .stat-trend {
        display: flex;
        gap: 4px;
        align-items: center;
        font-size: 12px;

        &.positive {
          color: #10b981;
        }

        &.negative {
          color: #ef4444;
        }
      }
    }
  }
}

.charts-section {
  margin-bottom: 24px;
}

.chart-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }

  &:nth-child(2) {
    grid-template-columns: 1fr 1fr;
  }
}

.chart-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 5%);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
  }

  .chart-container {
    height: 300px;

    .chart {
      width: 100%;
      height: 100%;
    }
  }
}

.activity-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 5%);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
  }

  .activity-list {
    .activity-item {
      display: flex;
      align-items: flex-start;
      padding: 16px 0;
      cursor: move;
      border-bottom: 1px solid #f0f0f0;
      transition: all 0.3s ease;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        background-color: #f9fafb;
      }

      &.dragging {
        background-color: #f0f7ff;
        opacity: 0.5;
      }

      .activity-avatar {
        margin-right: 12px;
      }

      .activity-content {
        flex: 1;

        .activity-title {
          margin-bottom: 4px;
          font-size: 14px;
          font-weight: 500;
          color: #262626;
        }

        .activity-desc {
          margin-bottom: 4px;
          font-size: 13px;
          color: #8c8c8c;
        }

        .activity-time {
          font-size: 12px;
          color: #bfbfbf;
        }
      }

      .activity-status {
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }
}

.project-overview-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 5%);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
  }

  .project-list {
    .project-item {
      padding: 16px 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .project-info {
        margin-bottom: 12px;

        .project-name {
          margin-bottom: 4px;
          font-size: 14px;
          font-weight: 500;
          color: #262626;
        }

        .project-desc {
          font-size: 13px;
          color: #8c8c8c;
        }
      }

      .project-progress {
        display: flex;
        align-items: center;

        .progress-text {
          min-width: 45px;
          margin-right: 8px;
          font-size: 13px;
          color: #595959;
        }
      }
    }
  }
}

.task-section {
  margin-bottom: 24px;

  .task-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;

    .task-item {
      padding: 16px;
      cursor: move;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgb(0 0 0 / 5%);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
        transform: translateY(-2px);
      }

      &.dragging {
        background-color: #f0f7ff;
        opacity: 0.5;
      }

      .task-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        .task-title {
          font-size: 15px;
          font-weight: 500;
          color: #262626;
        }
      }

      .task-content {
        .task-desc {
          margin-bottom: 12px;
          font-size: 13px;
          color: #8c8c8c;
        }

        .task-meta {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;
          font-size: 12px;
          color: #595959;
        }

        .task-progress {
          margin-top: 8px;
        }
      }
    }
  }
}

/* 列表动画 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 响应式设计 */
@media (width <= 1200px) {
  .chart-row {
    grid-template-columns: 1fr 1fr;

    &:nth-child(2) {
      grid-template-columns: 1fr 1fr;
    }
  }
}

@media (width <= 768px) {
  .dashboard-container {
    padding: 16px;
  }

  .stats-cards {
    grid-template-columns: 1fr;
  }

  .chart-row {
    grid-template-columns: 1fr;

    &:nth-child(2) {
      grid-template-columns: 1fr;
    }
  }

  .task-list {
    grid-template-columns: 1fr;
  }
}
</style>
